import React from 'react'
import {Button, Modal, Form, Input, Radio, message} from 'antd';

import _ from 'underscore';

import Tools from './Tools';
import List from './List';
import CreateModal from './CreateModal';

const FormItem = Form.Item;
const confirm = Modal.confirm;

class MenuMan extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            menus: [],
            isShowCreateModal: false,
            createModalConfirmLoading: false
        };
    }

    componentDidMount() {
        //这里的属性可以是table tree的 也是 tree select的
        this.setState({
            menus: [
                {
                    key: 1,
                    name: '菜单管理',
                    type: 1,
                    children: [
                        {
                            key: 11,
                            name: '创建菜单',
                            type: 1,
                            children: null,
                            label: '创建菜单',
                            value: 11,
                            children: null
                        }
                    ],
                    label: '菜单管理',
                    value: 1
                },
                {
                    key: 2,
                    name: '企业管理',
                    type: 1,
                    children: null,
                    label: '企业管理',
                    value: 2
                }
            ]
        });
    }

    showCreate = () => {
        this.setState({isShowCreateModal: true});
    }

    handleCreateCancel = () => {
        //loading状态不允许关闭
        if (this.state.createModalConfirmLoading) {
            message.warning('正在操作, 不能关闭窗口');
            return;
        }
        this.setState({isShowCreateModal: false});
    }

    handleCreate = () => {
        const form = this.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }

            this.setState({
                createModalConfirmLoading: true
            });

            console.log('Received values of form: ', values);

            const param = {
                ...values,
                category: 1
            }

            ///////////////////////////////////////
            ///////////////////////////////////////
            ///////////////////////////////////////
            //       模拟添加这一个节点
            //       模拟从server创建成功返回的数据
            ///////////////////////////////////////
            ///////////////////////////////////////
            ///////////////////////////////////////
            let created = {
                key: 12,
                name: '更新菜单',
                type: 1,
                children: null,
                label: '更新菜单',
                value: 12,
                children: null,
                pid: 1//父菜单id
            };

            let menusData = this.state.menus;

            //找到刚才创建成功菜单的父节点, 然后将json设置进他的children数组
            let parent = _(menusData).findWhere({key: created.pid});
            //如果children是空, 则初始化空数组
            if (!parent.children) {
                parent.children = [];
            }

            //将新建的children添加进原有的children数组
            parent.children = [created, ...parent.children];


            //重置新建modal的form
            form.resetFields();

            message.success('创建成功');

            //更新状态
            this.setState({
                menus: menusData,
                isShowCreateModal: false,
                createModalConfirmLoading: false
            });
        });
    }


    render() {
        return (
            <div>
                {/*工具组件*/}
                <Tools onShowCreate={this.showCreate}/>
                {/*列表组件*/}
                <List dataSource={this.state.menus}/>
                {/*创建modal组件*/}
                <CreateModal
                    ref={form => this.form = form}
                    treeData={this.state.menus}
                    visible={this.state.isShowCreateModal}
                    onCancel={this.handleCreateCancel}
                    onOk={this.handleCreate}
                    confirmLoading={this.state.createModalConfirmLoading}
                />
            </div>
        );
    }
}

export default MenuMan